<!-- 江南公安登录 -->

<template>
  <div id="LoginJnga" v-bind="loginProp">
    <el-form ref="form" v-bind="formProp">
      <div id="LoginJnga-logo" v-bind="logoProp" />

      <el-tabs id="LoginJnga-tab" :value="`${one.loginType}`" @tab-click="toSwitch">
        <el-tab-pane v-for="item in DICT.TYPE" :key="item[0]" :label="item[1]" :name="item[0]" />
      </el-tabs>

      <el-form-item v-bind="accountProp">
        <el-input
          v-model.trim="one.account"
          :maxlength="one.loginType === 1 ? 20 : 11"
          :placeholder="accountProp.rules[0].message"
          clearable
          @keyup.enter.native="toLogin"
        />
      </el-form-item>

      <el-form-item v-bind="passwordProp">
        <el-input
          v-model.trim="one.password"
          :maxlength="20"
          :placeholder="passwordProp.rules[0].message"
          :show-password="one.loginType === 1"
          clearable
          @keyup.enter.native="toLogin"
        />
        <div v-if="one.loginType === 2" :id="`${$options.name}-send`">
          <span v-if="info.second">{{ info.second }} 秒</span>
          <el-button v-else type="text" @click="toSend">获取验证码</el-button>
        </div>
      </el-form-item>

      <el-button id="LoginJnga-submit" type="primary" @click="toLogin">
        <span>登</span>
        <span>录</span>
      </el-button>
    </el-form>

    <Verify
      ref="verify"
      :captcha-type="'blockPuzzle'"
      :img-size="{ width: '400px', height: '200px' }"
      @success="startOne()"
    />
  </div>
</template>

<script>
// ============================== 导入依赖 ============================== //

import CORE from '@/CORE'
import Login from '../Login'

// ============================== 导出组件 ============================== //

export default CORE.extend(Login, {
  /**
   * 名称定义 (实际使用名称)
   */
  name: 'LoginJnga',

  /**
   * 计算属性 (慎用箭头函数)
   */
  computed: {
    ...Login.computed,

    /**
     * 表单属性
     */
    formProp() {
      return {
        model: this.one,
        style: { backgroundImage: this.getBgImg('form') },
      }
    },
  },
})
</script>

<style lang="scss">
@import './index.scss';
</style>
